<template>
<div>
 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
  <div v-for="item in alllist" class="goods">
  		<div class="goods_img"><img v-bind:src="item.goodsListImg"/></div>
  		<div class="goods_info">
  			<p class="goods_name">{{item.goodsName}}</p>
  			<p class="goods_price">￥&nbsp;{{item.price}}</p>
  		</div>
  </div>
</div>
</div>
</template>
<style>
	.goods{
		display: flex;
		justify-content: space-between;
		height:100px;
		border-bottom:1px solid #ccc;
		.goods_img{
			flex:1;
			img{
				margin-top:10px;
				margin-left:10px;
				width:80px;
				height:80px;
			}
		}
		.goods_info{
			flex:2;
			vertical-align: top;
			.goods_name{
				font-size:14px;
			}
			.goods_price{
				font-size: 18px;
				font-weight: bold;
				color:red;
			}
		}
	}
</style>
<script>
  import MintUI from 'mint-ui';
  import 'mint-ui/lib/style.css';

  export default {
    
    data(){
        return{
            alllist:{}
        }
    },
    created(){
        this.$http.jsonp('http://datainfo.duapp.com/shopdata/getGoods.php')
        .then(function(response){
            //赋值给alllist数组,
            this.alllist=response.body;
            console.info(this.alllist);
        },function(error){
           //error
         });
    },
    methods:{
    	loadMore() {
 			 this.loading = true;
  				setTimeout(() => {
    			let last = this.alllist[this.alllist.length - 1];
    			for (let i = 1; i <= last; i++) {
     				 this.alllist.push(last + i);
   				 }
    			this.loading = false;
  }, 2500);
}
    }
  };
</script>